<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/vue.js"></script>
    <link rel="stylesheet" href="../../static/masrc/iconfont.css">
    <script src="../../static/js/axios.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-family: Arial;
        }
        #all
        {
            width: 100vw;
            height: auto;
            background-color: #f5f8ff;
        }
        .greenBack
        {
            height: 33.33vh;
            background-color: #27ad64;
        }
        /*4.5vw*/
        .personInfo
        {
            height: auto;
            width: auto;
            border-radius: 4.5vw;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            padding-bottom: 1vh;
            margin: -31vh 4.5vw 1.5vh;
        }
        .personInfo .time
        {
            /*150 120 20*/
            text-align: center;
            height: 20vh;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .personInfo .name
        {
            display: flex;
            margin-left: 2vh;
            margin-right: 2vh;
            font-size: 2vh;
            line-height: 6vh;
            height: 6vh;
            justify-content: space-between;
        }
        .personInfo .name .control
        {
            color:#227fd8;
        }
        .personInfo .qrcode
        {
            height: 35vh;
            display: flex;
            flex-direction: column;
        }
        .personInfo .qrcode .tip
        {
            text-align: center;
            height: 4vh;
            line-height: 4vh;
            font-size: 2vh;
            margin-bottom: 10px;
        }
        .personInfo .qrcode .code
        {
            display: flex;
            justify-content: center;
        }
        .personInfo .qrcode .code img
        {
            width: 30vh;
            height: 30vh;
        }
        .personInfo .tips
        {
            height: 5vh;
            background-color: #f5f8ff;
            margin: 0 auto;
            width: 80vw;
            border-radius: 10px;
            display: flex;
        }
        .personInfo .tips .warn
        {
            width: 80px;
            line-height: 5vh;
            display: flex;
            justify-content: center;
            color: #40AFFE;
        }
        .personInfo .tips .warn .left
        {
            font-size: 2.5vh;
        }
        .personInfo .tips .word
        {
            flex: 1;
            font-size: 2.85vw;
            line-height: 5vh;
            display: flex;
            justify-self: center;
        }
        .personInfo .tips .direction
        {
            width: 80px;
            line-height: 5vh;
            display: flex;
            justify-self: center;
        }
        .personInfo .tips .direction .right
        {
            font-size: 2.5vh;
        }
        .vaccineAndWalkCard
        {
            height: 15vh;
            width: auto;
            display: flex;
            border-radius: 4.5vw;
            background-color: #ffffff;
            justify-content: space-around;
            margin: 5px 4.5vw 1.5vh;
        }
        .vaccineAndWalkCard .vaccineCard
        {
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
        .vaccineAndWalkCard .vaccineCard .tmp
        {
            width: 33vw;
            height: 12vh;
            border-radius: 2.5vw;
            background-image: linear-gradient(45deg, #6da7f2, #61da8d);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #efffff;
        }
        .vaccineAndWalkCard .vaccineCard .tmp .vaccineTip
        {
            margin: 0 auto;
            height: 4vh;
            width: 20vw;

        }

        .vaccineAndWalkCard .vaccineCard .tmp .vaccineCheck
        {
            margin: 0 auto;
            text-align: center;
            line-height: 3.5vh;
            width: 20vw;
            height: 3.5vh;
            border: 1px solid #efffff;
            border-radius: 2vh;
            font-size: 1.7vh;
        }
        .vaccineAndWalkCard .walkCard
        {
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
        .vaccineAndWalkCard .walkCard .tmp
        {
            width: 33vw;
            height: 12vh;
            display: flex;
            flex-direction: column;
        }
        .vaccineAndWalkCard .walkCard .tmp div
        {
            text-align: center;
            margin: 0 auto;
        }
        .vaccineAndWalkCard .walkCard .tmp .check
        {
            width: 20vw;
            height: 3.5vh;
            border-radius: 2vh;

            background-color: #1678fe;
            text-align: center;
            color: #efffff;
            line-height: 3.5vh;
            font-size: 1.7vh;
        }
        .vaccineInfo
        {
            height: 10vh;
            width: auto;
            border-radius: 4.5vw;
            background-color: #ffffff;
            display: flex;
            padding-left: 4vw;
            padding-right: 2vw;
            padding-top: 1vh;
            margin: 5px 4.5vw 1.5vh;

        }
        .vaccineInfo .vaccineInfoTip
        {
            width: 44vw;
            height: 8vh;
            display: flex;
            flex-direction: column;
            margin-right: 10vw;
        }
        .vaccineInfo .vaccineInfoCheck
        {
            width: 33vw;
            height: 8vh;
            background-color: #eef7fe;
            color: #128ee7;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            border-radius: 2vh;
            padding-bottom: 1vh;
            padding-left: 3vw;
        }
        .fourBottoms
        {
            padding-top: 1vh;
            padding-bottom: 1vh;
            margin-top: 5px;
            height: 13vh;
            width: auto;
            margin-left: 4.5vw;
            margin-right: 4.5vw;
            border-radius: 4.5vw;
            background-color: #ffffff;
            display: flex;
            justify-content: space-around;
        }
        .fourBottoms .box
        {
            width: 16vw;
            text-align: center;
            font-size: 2.9vw;
        }
        .fourBottoms .box img
        {
            margin: 0 auto;
            width: 10vw;
            height: 10vw;
        }

        .tail
        {
            padding-top: 2vw;
            text-align: center;
            display: flex;
            flex-direction: column;
            font-size: 2.9vw;
            line-height: 4vw;
        }

    </style>
</head>

<!--1.绿色背景 2.个人信息 3.疫苗和行程卡 4.核酸信息 5.4排按钮 6.尾部-->
<!--2包含的1.时间2.姓名3.二维码4.提示-->
<body>
  <div id="all">
      <div class="greenBack"></div>
      <div class="personInfo">
          <div class="time">
            <div style="font-size: 120px;font-weight: bold;color: #33404e;">{{ date }}</div>
            <div style="font-size: 150px;font-weight: bold;color: #33404e;">{{ time }}</div>
          </div>
            <hr style="width: 85vw;margin: 0 auto;background-color: #d9d9d9;height: 1px;border:none;">
          <div class="name">
              <div id="name">
                  <span style="font-size:2.5vh;font-weight: bold;">{{ name }}&nbsp&nbsp</span>
                  <span class="control" v-if="nameControl" @click="name_change()">显示</span>
                  <span class="control" v-if="!nameControl" @click="name_change()">隐藏</span>
              </div>

              <div><span class="control">修改</span>&nbsp|&nbsp<span class="control">代办</span></div>
          </div>
          <div class="qrcode">
              <div class="tip" style="font-size: 2.5vh;font-weight: bold;">杭州健康码</div>
              <div class="code">
                  <img src="../../static/img/html_img/qrcode.png" alt="绿码">
              </div>
          </div>
          <div class="tips" v-show="shortTips" @click="shortTips=!shortTips">
              <div class="warn"> <span class="iconfont icon-jinggao left"></span> </div>
              <div class="word">绿码：凭此码可在浙江省范围内通行，请主动出...</div>
              <div class="direction"> <span class="iconfont icon-xiala right"></span> </div>
          </div>
          <div class="tips" style="height: 12vh;word-wrap: break-word;word-break: normal" v-show="!shortTips" @click="shortTips=!shortTips">
              <div class="warn"> <span class="iconfont icon-jinggao left"></span> </div>
              <div class="word" style="line-height:4.2vw;margin-top: 2.5vw;display: block">绿码：凭此码可在浙江省范围内通行，
                  请主动出示，配合检查；并做好自身防护工作，码颜色将根据您的申报由当地政府按照相关政策动态更新，出行前请仔细检查您的健康码。
              </div>
              <div class="direction" style="padding-top:6.8vh;justify-content: center"> <span class="iconfont icon-xiangshang right"></span> </div>
          </div>
      </div>
      <div class="vaccineAndWalkCard">
          <div class="vaccineCard">
              <div class="tmp">
                  <div class="vaccineTip">
                      <div style="width: 9vw;height: 4vh;float: left;text-align: center;font-size:4vh;">1</div>
                      <div style="width: 9vw;height: 2vh;float: left;text-align: left;font-size: 1.5vh">天内</div>
                      <div style="width: 9vw;height: 2vh;float: left;text-align: left;font-size: 2vh">阴性</div>
                  </div>
                  <div class="vaccineCheck">核酸监测</div>
              </div>
          </div>
          <div style="display: flex;flex-direction: column;justify-content: center;">
              <div style="width: 1px;height: 12vh;background-color: #d7d7d7"></div>
          </div>

          <div class="walkCard">
              <div class="tmp">
                  <div style="font-size: 3.5vw;color: #333333;font-weight: bold;margin-bottom: 0.5vh">行程卡</div>
                  <div style="font-size: 3vw;color: #989898">查看7天是否到过中</div>
                  <div style="font-size: 3vw;color: #989898">高风险地区</div>
                  <div class="check" style="margin-top: 0.5vh">立即查看</div>
              </div>
          </div>
      </div>
      <div class="vaccineInfo">
          <div class="vaccineInfoTip">
              <div style="font-size: 3.5vw;margin-top: 2vh;">最近核酸记录</div>
              <div style="font-size: 3vw">{{date}}&nbsp01:14&nbsp&nbsp报告时间</div>
          </div>
          <div class="vaccineInfoCheck">
              <div style="font-size: 3.5vw">距离3天到期还剩</div>
              <div style="font-size: 3vw"><span style="font-size: 5vw;">2</span>天
                  <span style="font-size: 5vw;">{{remainderTime}}</span>小时</div>
          </div>
      </div>
      <div class="fourBottoms">
          <div class="box"><img src="../../static/img/html_img/Snipaste_2022-10-24_15-01-48.png" alt=""> <br><br> 入杭报备 <br> 登记</div>
          <div class="box"><img src="../../static/img/html_img/Snipaste_2022-10-24_15-01-54.png" alt=""> <br><br> 疫苗接种 <br> 记录</div>
          <div class="box"><img src="../../static/img/html_img/Snipaste_2022-10-24_15-01-59.png" alt=""> <br><br> 核酸检测 <br> 记录</div>
          <div class="box"><img src="../../static/img/html_img/Snipaste_2022-10-24_15-02-05.png" alt=""> <br><br> 核酸采样点 <br> 查询</div>
      </div>
      <div class="tail">
          <div style="color: #1876f4">网络申诉</div>
          <br>
          <br>
          <div>服务热线：0571-12345-6</div>
          <div>-本服务由当地人民政府提供-</div>
          <br>
          <div><span style="font-size: 3vw;font-weight: bold;">中文</span>/English</div>
          <br>
          <br>
          <br>
          <br>
      </div>
  </div>

<script>
    let vm = new Vue
    ({
        el:"#all",
        data:
            {
                shortTips: true,
                date: "",
                time: "",
                originName: "",
                name: "",
                nameControl: false,
                remainderTime: ""
            },
        methods:
            {
                get_time()
                {
                    let date = new Date()
                    this.date = (date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth())
                        + '月' + (date.getDay() < 10 ? '0' + date.getDay() : date.getDay()) + '日'
                    this.time = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
                        + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
                        + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
                },
                name_change()
                {
                    if(this.nameControl)
                        this.name = this.originName
                    else
                        this.name = this.originName.replace(this.name[1], '*')
                    this.nameControl = !this.nameControl
                },
                get_name()
                {
                    // let url = "http://124.221.207.2/rand_name"
                    let url = "http://127.0.0.1:5000/rand_name"
                    let data = {"root":"root"}
                    axios.post(url, data, {
                        headers: {'Content-Type':'application/x-www-form-urlencoded'}
                    }).then(res => {
                        console.log(res)
                        this.originName = res.data.name
                        console.log(res.data.name)
                        this.name = this.originName.replace(this.name[1], '*')
                    })

                }
            },
        created()
        {
            this.get_name()
            this.get_time()
        }
    })
    setInterval("vm.get_time()", 1000)
</script>

</body>
</html>